<!-- 报告报表 -->
<template>
  <div class="reportForms" v-loading="reportFormsLoading">
    <div class="title">报告报表</div>
    <div class="searchBox">
      <el-form ref="form" :model="timeForm" size="mini" inline>
        <el-form-item label="时间" label-width="60px">
          <el-col :span="11">
            <el-date-picker
              v-model="timeForm.starttime"
              type="date"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择开始日期"
            ></el-date-picker>
          </el-col>
          <el-col :span="2" style="text-align:center">-</el-col>
          <el-col :span="11">
            <el-date-picker
              v-model="timeForm.lasttime"
              type="date"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择结束日期"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="报告类型">
          <el-select v-model="searchForm.search" placeholder="请选择报告类型">
            <el-option
              v-for="item of reportTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="greenBtn"
            size="mini"
            @click="onSubmit({pageSize: pageSize, pageNum: 1})"
          >确定</el-button>
          <!-- <el-button type="primary" class="greenBtn" size="mini" @click="exportExcel">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <div class="reportTableBox">
      <!-- <el-table
        :data="reportForms.data"
        border
        style="width: 100%"
        :show-header="false"
        >
        <el-table-column
          prop="name"
          label="文档">
          <template slot-scope="scope">
            <el-button type="text" @click="openFile(scope.row.path)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="时间">
        </el-table-column>
      </el-table>-->
      <mergeTable
        :tableData="tableData"
        :tableConfig="tableConfig"
        :attributes="{
          border: true,
          headerCellStyle: {
            backgroundColor: 'transparent',
          },
          cellStyle: {
            height: '50px',
            backgroundColor: 'transparent',
          },
          headerRowStyle: {
            backgroundColor: 'transparent'
          },
          rowStyle: {
            backgroundColor: 'transparent'
          }
        }"
      >
        <el-table-column slot="operation" align="center" label="操作">
          <template slot-scope="{ row }">
            <span class="actionBtn">删除</span>
            <!-- <span class="actionBtn out" v-show="row.operation">删除</span> -->
          </template>
        </el-table-column>
      </mergeTable>
      <myPaging :func="pageUpdate" :total="reportForms.total"></myPaging>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import myPaging from "@/components/myPaging.vue";
export default {
  name: "reportForms",
  components: {
    myPaging
  },
  data() {
    return {
      msg: "hello reportForms!",
      reportFormsLoading: false,
      searchForm: {
        search: ""
      },
      timeForm: {
        //时间段
        starttime: "",
        lasttime: ""
      },
      tableData: [
        {
          reportType: "4",
          reportTime: "入库",
          file: "2020年3月1日 12:00:00",
          enclosure: "飞灰",
          generateTime: "HW18 焚烧处置残渣",
          generateStatus: "772-004-18",
          operation: "T"
        },
        {
          reportType: "4",
          reportTime: "入库",
          file: "2020年3月1日 12:00:00",
          enclosure: "飞灰",
          generateTime: "HW18 焚烧处置残渣",
          generateStatus: "772-004-18",
          operation: "T"
        }
      ],
      tableConfig: [
        {
          prop: "reportType",
          label: "报告类型",
          align: "center"
        },
        { prop: "reportTime", label: "报告日期", align: "center" },
        { prop: "file", label: "文件", align: "center" },
        { prop: "enclosure", label: "附件", align: "center" },
        { prop: "generateTime", label: "报告生成时间", align: "center" },
        { prop: "generateStatus", label: "报告状态", align: "center" },
        { prop: "operation", slot: "operation" }
      ],
      reportTypes: [
        { label: "日报", value: "dayReport" },
        { label: "周报", value: "weekReport" },
        { label: "水质异常情况报告", value: "monthReport" }
      ]
    };
  },
  methods: {
    ...mapActions(["fetchReportFormsList"]),
    async onSubmit(pageOption = { pageSize: this.pageSize, pageNum: 1 }) {
      this.reportFormsLoading = true;

      await this.fetchReportFormsList({ ...this.searchForm, ...pageOption });

      this.reportFormsLoading = false;
    },
    pageUpdate(option) {
      this.onSubmit(option);
    },
    openFile(path) {
      window.open("http://47.112.16.168:" + path);
    },
    async exportExcel() {
      // await this.onSubmit()
      this.$message("正在导出数据请稍后");
      await this.downReportFormsExcel(this.searchForm);
    }
  },
  created() {
    this.searchForm.search = this.reportTypes[0].value;

    this.onSubmit();
  },
  computed: {
    ...mapGetters({
      reportForms: "getReportForms",
      //分页依赖
      pageSize: "getPageSize"
    })
  }
};
</script>
<style scoped>
.reportForms {
  background: #fff;
  padding: 0 20px;
  min-height: 100%;
}
.reportForms .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.reportForms .title::before {
  content: "";
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  margin-bottom: 15px;
}
.reportTableBox {
  width: 70%;
}
</style>